<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <!-- HTTPS 安全策略 -->
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>猫咪玩具游戏 🐾</title>
    <script>
        // 自动添加时间戳到CSS，防止缓存
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'styles.css?t=' + Date.now();
        document.head.appendChild(link);
    </script>
</head>
<body>
    <!-- 主菜单界面 -->
    <div id="menu-screen" class="screen active">
        <div class="menu-container">
            <h1 class="game-title">🐾 猫咪玩具时间 🐾</h1>
            <p class="subtitle">选择你最喜欢的玩具</p>
            <div class="menu-links">
                <a href="https://game.foxbaby.top:8080" target="_blank" class="game-link"><span class="game-icon">🎮</span>人类游戏</a>
                <a href="https://gitee.com/foxbaby213/cat-game" target="_blank" class="git-link" title="提需求或反馈">
                    <svg viewBox="0 0 1024 1024" width="24" height="24">
                        <path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23"/>
                    </svg>
                </a>
                <a href="https://foxbaby.top/" target="_blank" class="blog-link" title="开发者博客">
                    <svg viewBox="0 0 1024 1024" width="24" height="24">
                        <path d="M853.333 960H170.667A42.667 42.667 0 0 1 128 917.333V106.667A42.667 42.667 0 0 1 170.667 64h682.666A42.667 42.667 0 0 1 896 106.667v810.666A42.667 42.667 0 0 1 853.333 960zM213.333 874.667h597.334V149.333H213.333v725.334z m128-170.667h341.334a42.667 42.667 0 0 0 0-85.333H341.333a42.667 42.667 0 0 0 0 85.333z m0-170.667h341.334a42.667 42.667 0 0 0 0-85.333H341.333a42.667 42.667 0 0 0 0 85.333z m0-170.666h170.667a42.667 42.667 0 0 0 0-85.334H341.333a42.667 42.667 0 0 0 0 85.334z" fill="#667eea"/>
                    </svg>
                </a>
            </div>
            
            <div class="game-options">
                <div class="option-group">
                    <div class="toy-selector">
                        <button class="toy-btn" data-toy="all">🎁 全部</button>
                        <button class="toy-btn" data-toy="ball">🎾 球球</button>
                        <button class="toy-btn" data-toy="mouse">🐭 老鼠</button>
                        <button class="toy-btn" data-toy="fish">🐟 小鱼</button>
                        <button class="toy-btn" data-toy="bird">🐦 小鸟</button>
                        <button class="toy-btn" data-toy="butterfly">🦋 蝴蝶</button>
                        <button class="toy-btn" data-toy="feather">🪶 羽毛</button>
                        <button class="toy-btn" data-toy="yarn">🧶 毛线</button>
                    </div>
                </div>
                
                <div class="option-group">
                    <p class="option-label">⏱️ 游戏时长</p>
                    <div class="time-selector">
                        <button class="time-btn" data-time="60">1分钟</button>
                        <button class="time-btn" data-time="120">2分钟</button>
                        <button class="time-btn" data-time="300">5分钟</button>
                        <button class="time-btn" data-time="600">10分钟</button>
                        <button class="time-btn" data-time="unlimited">不计时</button>
                    </div>
                </div>
            </div>
            
            <button id="play-btn" class="play-button">开始玩耍！</button>
        </div>
    </div>

    <!-- 游戏界面 -->
    <div id="game-screen" class="screen">
        <div class="game-header">
            <div class="timer">⏱️ <span id="time">60</span>s</div>
            <div class="score">🐾 <span id="score">0</span></div>
            <button id="menu-btn" class="menu-button">🏠</button>
        </div>
        
        <canvas id="game-canvas"></canvas>
        
        <div class="paw-indicator" id="paw-indicator"></div>
    </div>

    <!-- 游戏结束界面 -->
    <div id="gameover-screen" class="screen">
        <div class="gameover-container">
            <h1 class="gameover-title">🎉 玩得真棒！🎉</h1>
            <div class="final-score">
                <p>你抓到了</p>
                <h2 id="final-score">0</h2>
                <p>个玩具！</p>
            </div>
            <div class="play-time" id="play-time-info"></div>
            <div class="cat-reaction" id="cat-reaction">😸</div>
            <button id="replay-btn" class="play-button">再玩一次！</button>
            <button id="back-menu-btn" class="secondary-button">选择其他玩具</button>
        </div>
    </div>

    <script>
        // 自动添加时间戳到JS，防止缓存
        const script = document.createElement('script');
        script.src = 'game.js?t=' + Date.now();
        document.body.appendChild(script);
    </script>
    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?276039851fa4fbd84f1696cb6fd15c51";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
        </script        
</body>
</html>

